/**
 * CommonForm 使用示例
 * 展示如何使用分组功能
 */

import { Button, Space } from 'antd';
import { useRef } from 'react';
import type { CommonFormRef, FormSection } from './index';
import CommonForm from './index';

/**
 * 示例 1: 基础用法 - 使用 fields 属性（自动显示"基础信息"标题）
 */
export const Example1 = () => {
  const formRef = useRef<CommonFormRef>(null);

  const fields = [
    {
      name: 'name',
      label: '姓名',
      type: 'input' as const,
      rules: [{ required: true, message: '请输入姓名' }],
      span: 12,
    },
    {
      name: 'age',
      label: '年龄',
      type: 'number' as const,
      span: 12,
    },
  ];

  const handleSubmit = async () => {
    const values = await formRef.current?.validateFields();
    console.log('表单值:', values);
  };

  return (
    <div style={{ padding: '24px' }}>
      <CommonForm ref={formRef} fields={fields} />
      <Space style={{ marginTop: '16px' }}>
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
      </Space>
    </div>
  );
};

/**
 * 示例 2: 多分组用法 - 基础信息 + 其他信息（展示美化效果）
 */
export const Example2 = () => {
  const formRef = useRef<CommonFormRef>(null);

  const sections: FormSection[] = [
    {
      title: '基础信息',
      fields: [
        {
          name: 'name',
          label: '姓名',
          type: 'input' as const,
          rules: [{ required: true, message: '请输入姓名' }],
          span: 12,
        },
        {
          name: 'gender',
          label: '性别',
          type: 'select' as const,
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' },
          ],
          span: 12,
        },
        {
          name: 'age',
          label: '年龄',
          type: 'number' as const,
          span: 12,
        },
        {
          name: 'birthday',
          label: '生日',
          type: 'date' as const,
          span: 12,
        },
      ],
    },
    {
      title: '联系方式',
      fields: [
        {
          name: 'phone',
          label: '电话',
          type: 'input' as const,
          rules: [{ required: true, message: '请输入电话' }],
          span: 12,
        },
        {
          name: 'email',
          label: '邮箱',
          type: 'input' as const,
          span: 12,
        },
        {
          name: 'address',
          label: '地址',
          type: 'textarea' as const,
          span: 24,
        },
      ],
    },
    {
      title: '其他信息',
      fields: [
        {
          name: 'isVip',
          label: '是否VIP',
          type: 'switch' as const,
          span: 12,
        },
        {
          name: 'remark',
          label: '备注',
          type: 'textarea' as const,
          span: 24,
        },
      ],
    },
  ];

  const handleSubmit = async () => {
    const values = await formRef.current?.validateFields();
    console.log('表单值:', values);
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div
        style={{
          background: '#ffffff',
          padding: '24px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <h2 style={{ marginBottom: '24px', color: '#333' }}>美化后的表单效果</h2>
        <CommonForm ref={formRef} sections={sections} />
        <Space style={{ marginTop: '24px' }}>
          <Button type="primary" onClick={handleSubmit}>
            提交
          </Button>
        </Space>
      </div>
    </div>
  );
};

/**
 * 示例 3: 动态分组 - 根据条件显示不同的分组
 */
export const Example3 = () => {
  const formRef = useRef<CommonFormRef>(null);

  const sections: FormSection[] = [
    {
      title: '基础信息',
      fields: [
        {
          name: 'userType',
          label: '用户类型',
          type: 'select' as const,
          options: [
            { label: '普通用户', value: 'normal' },
            { label: 'VIP用户', value: 'vip' },
          ],
          rules: [{ required: true, message: '请选择用户类型' }],
          span: 12,
        },
        {
          name: 'name',
          label: '姓名',
          type: 'input' as const,
          rules: [{ required: true, message: '请输入姓名' }],
          span: 12,
        },
      ],
    },
    {
      title: 'VIP 专属信息',
      fields: [
        {
          name: 'vipLevel',
          label: 'VIP 等级',
          type: 'select' as const,
          options: [
            { label: '金卡', value: 'gold' },
            { label: '银卡', value: 'silver' },
            { label: '铜卡', value: 'bronze' },
          ],
          span: 12,
          // 根据用户类型动态显示
          visible: (formValues: any) => formValues.userType === 'vip',
        },
        {
          name: 'vipExpireDate',
          label: 'VIP 到期时间',
          type: 'date' as const,
          span: 12,
          visible: (formValues: any) => formValues.userType === 'vip',
        },
      ],
    },
  ];

  const handleSubmit = async () => {
    const values = await formRef.current?.validateFields();
    console.log('表单值:', values);
  };

  return (
    <div style={{ padding: '24px' }}>
      <CommonForm ref={formRef} sections={sections} />
      <Space style={{ marginTop: '16px' }}>
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
      </Space>
    </div>
  );
};

export default Example2;
